<template>
  <div id="caipu" v-if="data">
    <h1 class="bt">菜谱大全</h1>
    <div class="title1">
      <div v-for="(item, index) in data" :key="index" class="title">
        <a :href="'#' + `${item.name}`">{{ item.name }}</a>
      </div>
    </div>
    <div class="zhukuang">
      <div class="pig1"><div id="猪肉" class="zhu">猪肉</div></div>
      <ul class="pig">
        <li>
          <a href="#">猪肉</a>
        </li>
        <li>
          <a href="#">排骨</a>
        </li>
        <li>
          <a href="#">猪蹄</a>
        </li>
        <li>
          <a href="#">猪肚</a>
        </li>
        <li>
          <a href="#">猪排</a>
        </li>
        <li>
          <a href="#">猪肝</a>
        </li>
        <li>
          <a href="#">猪骨</a>
        </li>
        <li>
          <a href="#">猪腰</a>
        </li>
        <li>
          <a href="#">猪脑</a>
        </li>
        <li>
          <a href="#">里脊</a>
        </li>
        <li>
          <a href="#">猪头</a>
        </li>
        <li>
          <a href="#">猪血</a>
        </li>
        <li>
          <a href="#">大排</a>
        </li>
        <li>
          <a href="#">猪心</a>
        </li>
        <li>
          <a href="#">猪皮</a>
        </li>
        <li>
          <a href="#">肘子</a>
        </li>
        <li>
          <a href="#">肉松</a>
        </li>
        <li>
          <a href="#">肥肠</a>
        </li>
        <li>
          <a href="#">腰花</a>
        </li>
        <li>
          <a href="#">肉皮</a>
        </li>
        <li>
          <a href="#">猪大肠</a>
        </li>
        <li>
          <a href="#">火腿</a>
        </li>
        <li>
          <a href="#">培根</a>
        </li>
        <li>
          <a href="#">猪耳朵</a>
        </li>
        <li>
          <a href="#">腊肉</a>
        </li>
        <li>
          <a href="#">香肠</a>
        </li>
        <li>
          <a href="#">猪尾巴</a>
        </li>
        <li>
          <a href="#">猪油</a>
        </li>
        <li>
          <a href="#">瘦肉</a>
        </li>
        <li>
          <a href="#">五花肉</a>
        </li>
        <li>
          <a href="#">猪肺</a>
        </li>
        <li>
          <a href="#">叉烧</a>
        </li>
        <li>
          <a href="#">火腿肠</a>
        </li>
        <li>
          <a href="#">肉末</a>
        </li>
        <li>
          <a href="#">腊肠</a>
        </li>
        <li>
          <a href="#">午餐肉</a>
        </li>
        <li>
          <a href="#">熏肉</a>
        </li>
        <li>
          <a href="#">肉丸</a>
        </li>
        <li>
          <a href="#">咸肉</a>
        </li>
      </ul>
    </div>
    <div class="nyrou">
      <div class="nyrou1">
        <div class="niurou1">
          <div class="niurou-2"><div id="牛肉" class="niurou">牛肉</div></div>
          <ul class="bull">
            <li><a href="#">牛肉</a></li>
            <li><a href="#">牛排</a></li>
            <li><a href="#">牛仔骨</a></li>
            <li><a href="#">牛筋</a></li>
            <li><a href="#">牛尾</a></li>
            <li><a href="#">牛百叶</a></li>
            <li><a href="#">牛杂</a></li>
            <li><a href="#">肥牛</a></li>
            <li><a href="#">牛腩</a></li>
            <li><a href="#">牛肚</a></li>
          </ul>
        </div>
        <div class="qita-one">
          <div class="qita">
            <div class="qita-1" id="其他肉类">其他肉类</div>
          </div>
          <ul class="qita-2">
            <li><a href="#">兔肉</a></li>
            <li><a href="#">驴肉</a></li>
            <li><a href="#">鹿肉</a></li>
            <li><a href="#">鹅肉</a></li>
            <li><a href="#">鹅肝</a></li>
            <li><a href="#">鹅肠</a></li>
            <li><a href="#">鹅掌</a></li>
          </ul>
        </div>
        <div class="jirou-one">
          <div class="jirou-1"><div class="jirou-2" id="鸡肉">鸡肉</div></div>
          <ul class="jirou-3">
            <li><a href="#">鸡翅</a></li>
            <li><a href="#">鸡胸</a></li>
            <li><a href="#">鸡腿</a></li>
            <li><a href="#">鸡爪</a></li>
            <li><a href="#">鸡胗</a></li>
            <li><a href="#">鸡肝</a></li>
            <li><a href="#">鸡心</a></li>
            <li><a href="#">鸡肠</a></li>
            <li><a href="#">鸡杂</a></li>
            <li><a href="#">公鸡</a></li>
            <li><a href="#">小鸡</a></li>
            <li><a href="#">仔鸡</a></li>
            <li><a href="#">乌鸡</a></li>
            <li><a href="#">野鸡</a></li>
            <li><a href="#">火鸡</a></li>
            <li><a href="#">鸡肉</a></li>
            <li><a href="#">土鸡</a></li>
            <li><a href="#">柴鸡</a></li>
            <li><a href="#">三黄鸡</a></li>
            <li><a href="#">童子鸡</a></li>
            <li><a href="#">老母鸡</a></li>
          </ul>
        </div>
      </div>

      <div class="nyrou2">
        <div class="yangrou-1">
          <div class="yangrou-2">
            <div id="羊肉" class="yangrou-3">羊肉</div>
          </div>
          <ul class="yangrou-4">
            <li><a href="#">羊肉</a></li>
            <li><a href="#">羊排</a></li>
            <li><a href="#">羊腿</a></li>
            <li><a href="#">羊蝎子</a></li>
          </ul>
        </div>
        <div class="nai">
          <div class="nai-1"><div class="nai-2" id="奶制品">奶制品</div></div>
          <ul class="nai-3">
            <li><a href="#">牛奶</a></li>
            <li><a href="#">奶油</a></li>
            <li><a href="#">奶酪</a></li>
            <li><a href="#">芝士</a></li>
            <li><a href="#">酸奶</a></li>
            <li><a href="#">黄油</a></li>
            <li><a href="#">奶粉</a></li>
            <li><a href="#">炼乳</a></li>
            <li><a href="#">酥油</a></li>
            <li><a href="#">淡奶油</a></li>
            <li><a href="#">奶油奶酪</a></li>
          </ul>
        </div>
        <div class="yarou">
          <div class="yarou-1"><div class="yarou-2">鸭肉</div></div>
          <ul class="yarou-3">
            <li><a href="#">鸭肝</a></li>
            <li><a href="#">鸭肉</a></li>
            <li><a href="#">鸭脖</a></li>
            <li><a href="#">鸭头</a></li>
            <li><a href="#">鸭掌</a></li>
            <li><a href="#">鸭腿</a></li>
            <li><a href="#">鸭肠</a></li>
            <li><a href="#">鸭翅</a></li>
            <li><a href="#">野鸭</a></li>
            <li><a href="#">老鸭</a></li>
            <li><a href="#">鸭血</a></li>
            <li><a href="#">鸭胗</a></li>
            <li><a href="#">鸭舌</a></li>
          </ul>
        </div>
      </div>
    </div>
    <div class="yurou">
      <div class="yurou-1"><div id="鱼肉" class="yurou-2">鱼肉</div></div>
      <ul class="yurou-3">
        <li><a href="#">鲤鱼</a></li>
        <li><a href="#">草鱼</a></li>
        <li><a href="#">武昌鱼</a></li>
        <li><a href="#">鲫鱼</a></li>
        <li><a href="#">鲈鱼</a></li>
        <li><a href="#">胖头鱼</a></li>
        <li><a href="#">鲶鱼</a></li>
        <li><a href="#">黑鱼</a></li>
        <li><a href="#">罗非鱼</a></li>
        <li><a href="#">鳗鱼</a></li>
        <li><a href="#">鲢鱼</a></li>
        <li><a href="#">青鱼</a></li>
        <li><a href="#">桂鱼</a></li>
        <li><a href="#">银鱼</a></li>
        <li><a href="#">鲷鱼</a></li>
        <li><a href="#">鲮鱼</a></li>
        <li><a href="#">鲟鱼</a></li>
        <li><a href="#">鳟鱼</a></li>
        <li><a href="#">乌鱼</a></li>
        <li><a href="#">柴鱼</a></li>
        <li><a href="#">鳊鱼</a></li>
        <li><a href="#">刀鱼</a></li>
        <li><a href="#">鳜鱼</a></li>
        <li><a href="#">鳙鱼</a></li>
        <li><a href="#">鲳鱼</a></li>
        <li><a href="#">海鱼</a></li>
        <li><a href="#">带鱼</a></li>
        <li><a href="#">黄鱼</a></li>
        <li><a href="#">三文鱼</a></li>
        <li><a href="#">鳕鱼</a></li>
        <li><a href="#">鲅鱼</a></li>
        <li><a href="#">金枪鱼</a></li>
        <li><a href="#">鲑鱼</a></li>
        <li><a href="#">鲨鱼</a></li>
        <li><a href="#">鸦片鱼</a></li>
        <li><a href="#">沙丁鱼</a></li>
        <li><a href="#">黄花鱼</a></li>
        <li><a href="#">虱目鱼</a></li>
        <li><a href="#">石斑鱼</a></li>
        <li><a href="#">银雪鱼</a></li>
        <li><a href="#">小黄鱼</a></li>
        <li><a href="#">秋刀鱼</a></li>
        <li><a href="#">比目鱼</a></li>
        <li><a href="#">龙利鱼</a></li>
        <li><a href="#">多宝鱼</a></li>
        <li><a href="#">多春鱼</a></li>
        <li><a href="#">大马哈鱼</a></li>
        <li><a href="#">鱼排</a></li>
        <li><a href="#">鱼片</a></li>
        <li><a href="#">鱼骨</a></li>
        <li><a href="#">鱼丸</a></li>
        <li><a href="#">鱼皮</a></li>
        <li><a href="#">咸鱼</a></li>
        <li><a href="#">鱼头</a></li>
        <li><a href="#">鱼子</a></li>
        <li><a href="#">木鱼花</a></li>
        <li><a href="#">鱼肉</a></li>
        <li><a href="#">鱼干</a></li>
      </ul>
    </div>
    <div class="col2">
      <div class="col2-1">
        <div class="dan">
          <div class="dan-1"><div class="dan-2" id="蛋类">蛋类</div></div>
          <ul class="dan-3">
            <li><a href="#">鸡蛋</a></li>
            <li><a href="#">鸭蛋</a></li>
            <li><a href="#">鹌鹑蛋</a></li>
            <li><a href="#">皮蛋</a></li>
            <li><a href="#">咸蛋</a></li>
            <li><a href="#">咸鸭蛋</a></li>
            <li><a href="#">蛋黄</a></li>
            <li><a href="#">蛋清</a></li>
            <li><a href="#">鹅蛋</a></li>
          </ul>
        </div>
        <div class="xie">
          <div class="xie-1"><div class="xie-2" id="蟹类">蟹类</div></div>
          <ul class="xie-3">
            <li><a href="#">毛蟹</a></li>
            <li><a href="#">海蟹</a></li>
            <li><a href="#">大闸蟹</a></li>
            <li><a href="#">螃蟹</a></li>
            <li><a href="#">蟹肉</a></li>
            <li><a href="#">梭子蟹</a></li>
            <li><a href="#">蟹黄</a></li>
            <li><a href="#">河蟹</a></li>
            <li><a href="#">珍宝蟹</a></li>
          </ul>
        </div>
        <div class="qita-">
          <div class="qita--1">
            <div class="qita--2" id="其他海鲜水产">其他海鲜水产</div>
          </div>
          <ul class="qita--3">
            <li><a href="#">田螺</a></li>
            <li><a href="#">泥鳅</a></li>
            <li><a href="#">黄鳝</a></li>
            <li><a href="#">甲鱼</a></li>
            <li><a href="#">鳝鱼</a></li>
            <li><a href="#">牛蛙</a></li>
            <li><a href="#">田鸡</a></li>
            <li><a href="#">螺丝</a></li>
            <li><a href="#">海参</a></li>
            <li><a href="#">鱿鱼</a></li>
            <li><a href="#">紫菜</a></li>
            <li><a href="#">章鱼</a></li>
            <li><a href="#">墨鱼</a></li>
            <li><a href="#">海蜇</a></li>
            <li><a href="#">海螺</a></li>
            <li><a href="#">海带</a></li>
            <li><a href="#">海兔</a></li>
            <li><a href="#">海藻</a></li>
            <li><a href="#">海胆</a></li>
            <li><a href="#">乌贼</a></li>
            <li><a href="#">裙带菜</a></li>
            <li><a href="#">海苔</a></li>
            <li><a href="#">螺蛳</a></li>
          </ul>
        </div>
        <div class="bu">
          <div class="bu-1"><div class="bu-2" id="补品">补品</div></div>
          <ul class="bu-3">
            <li><a href="#">燕窝</a></li>
            <li><a href="#">花胶</a></li>
            <li><a href="#">雪蛤</a></li>
            <li><a href="#">阿胶</a></li>
            <li><a href="#">人参</a></li>
            <li><a href="#">首乌</a></li>
            <li><a href="#">鱼肚</a></li>
            <li><a href="#">虫草花</a></li>
          </ul>
        </div>
        <div class="jin">
          <div class="jin-1">
            <div class="jin-2" id="茎叶蔬菜">茎叶蔬菜</div>
          </div>
          <ul class="jin-3">
            <li><a href="#">白菜</a></li>
            <li><a href="#">芹菜</a></li>
            <li><a href="#">油麦菜</a></li>
            <li><a href="#">韭菜</a></li>
            <li><a href="#">豆芽</a></li>
            <li><a href="#">圆白菜</a></li>
            <li><a href="#">油菜</a></li>
            <li><a href="#">香菜</a></li>
            <li><a href="#">小白菜</a></li>
            <li><a href="#">菠菜</a></li>
            <li><a href="#">生菜</a></li>
            <li><a href="#">娃娃菜</a></li>
            <li><a href="#">芦笋</a></li>
            <li><a href="#">蒜苗</a></li>
            <li><a href="#">大白菜</a></li>
            <li><a href="#">茼蒿</a></li>
            <li><a href="#">豆苗</a></li>
            <li><a href="#">卷心菜</a></li>
            <li><a href="#">苋菜</a></li>
            <li><a href="#">芥菜</a></li>
            <li><a href="#">紫甘蓝</a></li>
            <li><a href="#">青菜</a></li>
            <li><a href="#">西芹</a></li>
            <li><a href="#">马齿苋</a></li>
            <li><a href="#">蒜苔</a></li>
            <li><a href="#">芥蓝</a></li>
            <li><a href="#">西洋菜</a></li>
            <li><a href="#">青蒜</a></li>
            <li><a href="#">牛至</a></li>
            <li><a href="#">豌豆苗</a></li>
            <li><a href="#">菜心</a></li>
            <li><a href="#">韭黄</a></li>
            <li><a href="#">芝麻菜</a></li>
            <li><a href="#">芦蒿</a></li>
            <li><a href="#">芥兰</a></li>
            <li><a href="#">马兰头</a></li>
            <li><a href="#">紫苏</a></li>
            <li><a href="#">甘蓝</a></li>
            <li><a href="#">穿心莲</a></li>
            <li><a href="#">桂花</a></li>
            <li><a href="#">香椿</a></li>
            <li><a href="#">菊花菜</a></li>
            <li><a href="#">塔菜</a></li>
            <li><a href="#">蕨菜</a></li>
            <li><a href="#">橄榄菜</a></li>
            <li><a href="#">荠菜</a></li>
            <li><a href="#">鱼腥草</a></li>
            <li><a href="#">水芹菜</a></li>
          </ul>
        </div>
        <div class="gan">
          <div class="gan-1">
            <div id="干果豆类" class="gan-2">干果豆类</div>
          </div>
          <ul class="gan-3">
            <li><a href="#">花生</a></li>
            <li><a href="#">枸杞</a></li>
            <li><a href="#">葡萄干</a></li>
            <li><a href="#">芝麻</a></li>
            <li><a href="#">杏仁</a></li>
            <li><a href="#">蔓越莓</a></li>
            <li><a href="#">莲子</a></li>
            <li><a href="#">桂圆</a></li>
            <li><a href="#">鹰嘴豆</a></li>
            <li><a href="#">白果</a></li>
            <li><a href="#">麦芽</a></li>
            <li><a href="#">罗汉果</a></li>
            <li><a href="#">板栗</a></li>
            <li><a href="#">绿豆</a></li>
            <li><a href="#">南瓜子</a></li>
            <li><a href="#">黑豆</a></li>
            <li><a href="#">黄豆</a></li>
            <li><a href="#">腰果</a></li>
            <li><a href="#">芸豆</a></li>
            <li><a href="#">蚕豆</a></li>
            <li><a href="#">红豆</a></li>
            <li><a href="#">黄豆</a></li>
            <li><a href="#">栗子</a></li>
            <li><a href="#">银杏</a></li>
            <li><a href="#">芡实</a></li>
            <li><a href="#">话梅</a></li>
            <li><a href="#">核桃</a></li>
            <li><a href="#">蜜豆</a></li>
            <li><a href="#">松仁</a></li>
            <li><a href="#">乌梅</a></li>
            <li><a href="#">桃胶</a></li>
            <li><a href="#">橄榄</a></li>
            <li><a href="#">榛子</a></li>
            <li><a href="#">眉豆</a></li>
            <li><a href="#">松子</a></li>
          </ul>
        </div>
        <div class="dou">
          <div class="dou-1"><div class="dou-2" id="豆制品">豆制品</div></div>
          <ul class="dou-3">
            <li><a href="#">豆腐</a></li>
            <li><a href="#">豆浆</a></li>
            <li><a href="#">豆腐干</a></li>
            <li><a href="#">豆皮</a></li>
            <li><a href="#">豆渣</a></li>
            <li><a href="#">豆腐脑</a></li>
            <li><a href="#">素鸡</a></li>
            <li><a href="#">腐竹</a></li>
            <li><a href="#">油豆腐</a></li>
            <li><a href="#">豆干</a></li>
            <li><a href="#">香干</a></li>
            <li><a href="#">臭豆腐</a></li>
            <li><a href="#">内酯豆腐</a></li>
            <li><a href="#">冻豆腐</a></li>
            <li><a href="#">日本豆腐</a></li>
            <li><a href="#">豆腐皮</a></li>
          </ul>
        </div>
      </div>
      <div class="col2-2">
        <div class="qtql">
          <div class="qtql-1">
            <div class="qtql-2" id="其他禽类">其他禽类</div>
          </div>
          <ul class="qtql-3">
            <li><a href="#">鸽子</a></li>
            <li><a href="#">鹌鹑</a></li>
          </ul>
        </div>
        <div class="xia">
          <div class="xia-1">
            <div class="xia-2" id="虾类">虾类</div>
          </div>
          <ul class="xia-3">
            <li><a href="#">大虾</a></li>
            <li><a href="#">虾仁</a></li>
            <li><a href="#">小龙虾</a></li>
            <li><a href="#">虾米</a></li>
            <li><a href="#">对虾</a></li>
            <li><a href="#">基围虾</a></li>
            <li><a href="#">龙虾</a></li>
            <li><a href="#">明虾</a></li>
            <li><a href="#">北极虾</a></li>
            <li><a href="#">虾皮</a></li>
            <li><a href="#">虾子</a></li>
            <li><a href="#">皮皮虾</a></li>
            <li><a href="#">海虾</a></li>
            <li><a href="#">虾干</a></li>
            <li><a href="#">海米</a></li>
            <li><a href="#">草虾</a></li>
          </ul>
        </div>
        <div class="bei">
          <div class="bei-1"><div class="bei-2" id="贝类">贝类</div></div>
          <ul class="bei-3">
            <li><a href="#">扇贝</a></li>
            <li><a href="#">牡蛎</a></li>
            <li><a href="#">蛤蜊</a></li>
            <li><a href="#">干贝</a></li>
            <li><a href="#">带子</a></li>
            <li><a href="#">瑶柱</a></li>
            <li><a href="#">蚬子</a></li>
            <li><a href="#">花甲</a></li>
            <li><a href="#">生蚝</a></li>
            <li><a href="#">河蚌</a></li>
            <li><a href="#">蛏子</a></li>
            <li><a href="#">鲍鱼</a></li>
            <li><a href="#">文蛤</a></li>
            <li><a href="#">鲜贝</a></li>
            <li><a href="#">青口</a></li>
            <li><a href="#">北极贝</a></li>
          </ul>
        </div>
        <div class="gen">
          <div class="gen-1">
            <div class="gen-2" id="根茎蔬菜">根茎蔬菜</div>
          </div>
          <ul class="gen-3">
            <li><a href="#">土豆</a></li>
            <li><a href="#">山药</a></li>
            <li><a href="#">白萝卜</a></li>
            <li><a href="#">洋葱</a></li>
            <li><a href="#">牛蒡</a></li>
            <li><a href="#">胡萝卜</a></li>
            <li><a href="#">红薯</a></li>
            <li><a href="#">魔芋</a></li>
            <li><a href="#">雪里蕻</a></li>
            <li><a href="#">榨菜</a></li>
            <li><a href="#">芋头</a></li>
            <li><a href="#">大头菜</a></li>
            <li><a href="#">竹笋</a></li>
            <li><a href="#">莴笋</a></li>
            <li><a href="#">花椰菜</a></li>
            <li><a href="#">茭白</a></li>
            <li><a href="#">牛蒂</a></li>
            <li><a href="#">心里美</a></li>
            <li><a href="#">紫薯</a></li>
            <li><a href="#">莴苣</a></li>
            <li><a href="#">青萝卜</a></li>
            <li><a href="#">马蹄</a></li>
            <li><a href="#">芋艿</a></li>
            <li><a href="#">地瓜</a></li>
            <li><a href="#">萝卜</a></li>
            <li><a href="#">百合</a></li>
            <li><a href="#">春笋</a></li>
            <li><a href="#">菱角</a></li>
            <li><a href="#">慈姑</a></li>
            <li><a href="#">冬笋</a></li>
            <li><a href="#">荸荠</a></li>
            <li><a href="#">淮山</a></li>
            <li><a href="#">藕</a></li>
            <li><a href="#">笋</a></li>
          </ul>
        </div>
        <div class="ggsc">
          <div class="ggsc-1">
            <div class="ggsc-2" id="瓜果蔬菜">瓜果蔬菜</div>
          </div>
          <ul class="ggsc-3">
            <li><a href="#">茄子</a></li>
            <li><a href="#">青椒</a></li>
            <li><a href="#">西兰花</a></li>
            <li><a href="#">菜花</a></li>
            <li><a href="#">豆角</a></li>
            <li><a href="#">西红柿</a></li>
            <li><a href="#">豌豆</a></li>
            <li><a href="#">扁豆</a></li>
            <li><a href="#">四季豆</a></li>
            <li><a href="#">豇豆</a></li>
            <li><a href="#">花菜</a></li>
            <li><a href="#">荷兰豆</a></li>
            <li><a href="#">辣椒</a></li>
            <li><a href="#">番茄</a></li>
            <li><a href="#">黄花菜</a></li>
            <li><a href="#">彩椒</a></li>
            <li><a href="#">秋葵</a></li>
            <li><a href="#">圣女果</a></li>
            <li><a href="#">刀豆</a></li>
            <li><a href="#">青豆</a></li>
            <li><a href="#">西葫芦</a></li>
            <li><a href="#">毛豆</a></li>
            <li><a href="#">瓠瓜</a></li>
            <li><a href="#">玉米笋</a></li>
            <li><a href="#">黄瓜</a></li>
            <li><a href="#">南瓜</a></li>
            <li><a href="#">冬瓜</a></li>
            <li><a href="#">苦瓜</a></li>
            <li><a href="#">丝瓜</a></li>
            <li><a href="#">佛瓜</a></li>
            <li><a href="#">节瓜</a></li>
            <li><a href="#">青瓜</a></li>
            <li><a href="#">角瓜</a></li>
          </ul>
        </div>
        <div class="jun">
          <div class="jun-1"><div class="jun-2" id="菌类">菌类</div></div>
          <ul class="jun-3">
            <li><a href="#">香菇</a></li>
            <li><a href="#">蘑菇</a></li>
            <li><a href="#">茶树菇</a></li>
            <li><a href="#">平菇</a></li>
            <li><a href="#">口菇</a></li>
            <li><a href="#">猴头菇</a></li>
            <li><a href="#">竹荪</a></li>
            <li><a href="#">草菇</a></li>
            <li><a href="#">金针菇</a></li>
            <li><a href="#">冬菇</a></li>
            <li><a href="#">口蘑</a></li>
            <li><a href="#">杏鲍菇</a></li>
            <li><a href="#">银耳</a></li>
            <li><a href="#">发菜</a></li>
            <li><a href="#">滑子菇</a></li>
            <li><a href="#">松茸</a></li>
            <li><a href="#">琼脂</a></li>
            <li><a href="#">黑木耳</a></li>
            <li><a href="#">榛蘑</a></li>
            <li><a href="#">花菇</a></li>
            <li><a href="#">白木耳</a></li>
            <li><a href="#">蟹味菇</a></li>
            <li><a href="#">鸡腿菇</a></li>
            <li><a href="#">白玉菇</a></li>
            <li><a href="#">双孢菇</a></li>
            <li><a href="#">姬松茸</a></li>
            <li><a href="#">木耳</a></li>
          </ul>
        </div>
        <div class="yan">
          <div class="yan-1">
            <div class="yan-2" id="腌咸蔬菜">腌咸蔬菜</div>
          </div>
          <ul class="yan-3">
            <li><a href="#">冬菜</a></li>
            <li><a href="#">芽菜</a></li>
            <li><a href="#">玉兰片</a></li>
            <li><a href="#">酸菜</a></li>
            <li><a href="#">泡菜</a></li>
            <li><a href="#">萝卜干</a></li>
            <li><a href="#">笋干</a></li>
            <li><a href="#">咸菜</a></li>
            <li><a href="#">梅干菜</a></li>
            <li><a href="#">纳豆</a></li>
            <li><a href="#">酸笋</a></li>
            <li><a href="#">酸豇豆</a></li>
            <li><a href="#">酱菜</a></li>
            <li><a href="#">辣白菜</a></li>
          </ul>
        </div>
      </div>
    </div>
    <div class="mmf">
      <div class="mmf-1">
        <div class="mi">
          <div class="mi-1">
            <div class="mi-2" id="米、面食、粉">米，面食，粉</div>
          </div>
          <ul class="mi-3">
            <li><a href="#">薏米</a></li>
            <li><a href="#">面粉</a></li>
            <li><a href="#">玉米面</a></li>
            <li><a href="#">黑米</a></li>
            <li><a href="#">面条</a></li>
            <li><a href="#">荞麦面</a></li>
            <li><a href="#">馒头</a></li>
            <li><a href="#">白面</a></li>
            <li><a href="#">方便面</a></li>
            <li><a href="#">年糕</a></li>
            <li><a href="#">意面</a></li>
            <li><a href="#">通心粉</a></li>
            <li><a href="#">高粱</a></li>
            <li><a href="#">大麦</a></li>
            <li><a href="#">燕麦片</a></li>
            <li><a href="#">燕麦</a></li>
            <li><a href="#">饺子</a></li>
            <li><a href="#">高粱米</a></li>
            <li><a href="#">油条</a></li>
            <li><a href="#">粉丝</a></li>
            <li><a href="#">粘米粉</a></li>
            <li><a href="#">凉粉</a></li>
            <li><a href="#">米粉</a></li>
            <li><a href="#">糯米粉</a></li>
            <li><a href="#">粉条</a></li>
            <li><a href="#">粉皮</a></li>
            <li><a href="#">蕨根粉</a></li>
            <li><a href="#">玉米</a></li>
            <li><a href="#">大米</a></li>
            <li><a href="#">全麦粉</a></li>
            <li><a href="#">小麦</a></li>
            <li><a href="#">糯米</a></li>
            <li><a href="#">红曲米</a></li>
            <li><a href="#">西米</a></li>
            <li><a href="#">小米</a></li>
            <li><a href="#">乌冬面</a></li>
            <li><a href="#">凉皮</a></li>
            <li><a href="#">米线</a></li>
            <li><a href="#">糙米</a></li>
            <li><a href="#">米饭</a></li>
            <li><a href="#">烤麸</a></li>
            <li><a href="#">汤圆</a></li>
            <li><a href="#">河粉</a></li>
            <li><a href="#">藕粉</a></li>
            <li><a href="#">紫米</a></li>
            <li><a href="#">黄米</a></li>
            <li><a href="#">澄面</a></li>
            <li><a href="#">燕麦</a></li>
            <li><a href="#">小麦</a></li>
            <li><a href="#">胚芽</a></li>
            <li><a href="#">面筋</a></li>
            <li><a href="#">低筋面粉</a></li>
            <li><a href="#">荞麦</a></li>
            <li><a href="#">高筋面粉</a></li>
            <li><a href="#">莜面</a></li>
          </ul>
        </div>
      </div>
    </div>

    <div class="co2">
      <div class="co2-1">
        <div class="caixi">
          <div class="caixi-1"><div class="caixi-2" id="菜系">菜系</div></div>
          <ul class="caixi-3">
            <li><a href="#">粤菜</a></li>
            <li><a href="#">川菜</a></li>
            <li><a href="#">湘菜</a></li>
            <li><a href="#">东北菜</a></li>
            <li><a href="#">上海菜</a></li>
            <li><a href="#">清真菜</a></li>
            <li><a href="#">湖北菜</a></li>
            <li><a href="#">云南菜</a></li>
            <li><a href="#">贵州菜</a></li>
            <li><a href="#">新疆菜</a></li>
            <li><a href="#">韩国菜</a></li>
            <li><a href="#">泰国菜</a></li>
            <li><a href="#">法国菜</a></li>
            <li><a href="#">鲁菜</a></li>
            <li><a href="#">日本料理</a></li>
            <li><a href="#">意大利菜</a></li>
            <li><a href="#">墨西哥菜</a></li>
          </ul>
        </div>
      </div>

      <div class="co2-2">
        <div class="kouwei">
          <div class="kouwei-1">
            <div class="kouwei-2" id="口味">口味</div>
          </div>
          <ul class="kouwei-3">
            <li><a href="#">麻辣</a></li>
            <li><a href="#">糖醋</a></li>
            <li><a href="#">咖喱</a></li>
            <li><a href="#">鱼香</a></li>
            <li><a href="#">香辣</a></li>
            <li><a href="#">酸辣</a></li>
            <li><a href="#">豆瓣</a></li>
            <li><a href="#">红油</a></li>
            <li><a href="#">拔丝</a></li>
            <li><a href="#">陈皮</a></li>
            <li><a href="#">芥末</a></li>
            <li><a href="#">酸甜</a></li>
            <li><a href="#">豆豉</a></li>
            <li><a href="#">卤菜</a></li>
            <li><a href="#">烧烤</a></li>
            <li><a href="#">干锅</a></li>
            <li><a href="#">红烧</a></li>
            <li><a href="#">蒸菜</a></li>
          </ul>
        </div>
      </div>
    </div>
    <div class="sg">
      <div class="sg-1">
        <div class="shuiguo">
          <div class="shuiguo-1">
            <div class="shuiguo-2" id="水果">水果</div>
          </div>
          <ul class="shuiguo-3">
            <li><a href="#">柠檬</a></li>
            <li><a href="#">菠萝</a></li>
            <li><a href="#">石榴</a></li>
            <li><a href="#">椰子</a></li>
            <li><a href="#">香蕉</a></li>
            <li><a href="#">芒果</a></li>
            <li><a href="#">葡萄</a></li>
            <li><a href="#">苹果</a></li>
            <li><a href="#">榴莲</a></li>
            <li><a href="#">草莓</a></li>
            <li><a href="#">蓝莓</a></li>
            <li><a href="#">木瓜</a></li>
            <li><a href="#">桂圆</a></li>
            <li><a href="#">柚子</a></li>
            <li><a href="#">西瓜</a></li>
            <li><a href="#">黄桃</a></li>
            <li><a href="#">樱桃</a></li>
            <li><a href="#">桔子</a></li>
            <li><a href="#">青梅</a></li>
            <li><a href="#">山楂</a></li>
            <li><a href="#">李子</a></li>
            <li><a href="#">金橘</a></li>
            <li><a href="#">荔枝</a></li>
            <li><a href="#">杏子</a></li>
            <li><a href="#">香瓜</a></li>
            <li><a href="#">杨梅</a></li>
            <li><a href="#">桑葚</a></li>
            <li><a href="#">杨桃</a></li>
            <li><a href="#">柿子</a></li>
            <li><a href="#">枇杷</a></li>
            <li><a href="#">梨子</a></li>
            <li><a href="#">橙子</a></li>
            <li><a href="#">桃子</a></li>
            <li><a href="#">甘蔗</a></li>
            <li><a href="#">猕猴桃</a></li>
            <li><a href="#">牛油果</a></li>
            <li><a href="#">火龙果</a></li>
            <li><a href="#">哈密瓜</a></li>
            <li><a href="#">百香果</a></li>
            <li><a href="#">覆盆子</a></li>
          </ul>
        </div>
      </div>
    </div>
    <div class="w tc footer">
      <div class="w960 clearfix">
        <div class="fr">
          <span class="copy"
            >©2022 xinshipu.com, all rights reserved.
            <a style="color: rgb(0, 0, 0)" href="http://www.beian.miit.gov.cn"
              >沪ICP备10013164号-1</a
            ></span
          >
          <span
            >友情提示：为谨防互联网电信诈骗，如网民接到962110民警电话，请立即接听</span
          >
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: [
        {
          name: "猪肉",
        },
        {
          name: "牛肉",
        },
        {
          name: "羊肉",
        },
        {
          name: "其他肉类",
        },
        {
          name: "奶制品",
        },
        {
          name: "鸡肉",
        },
        {
          name: "鸭肉",
        },
        {
          name: "蛋类",
        },
        {
          name: "其他禽类",
        },
        {
          name: "贝类",
        },
        {
          name: "其他海鲜水产",
        },
        {
          name: "根茎蔬菜",
        },
        {
          name: "米、面食、粉",
        },
        {
          name: "茎叶蔬菜",
        },
        {
          name: "腌咸蔬菜",
        },
        {
          name: "瓜果蔬菜",
        },
        {
          name: "豆制品",
        },
        {
          name: "干果豆类",
        },
        {
          name: "菜系",
        },
        {
          name: "口味",
        },
        {
          name: "蟹类",
        },
        {
          name: "水果",
        },
        {
          name: "鱼肉",
        },
        {
          name: "虾类",
        },
        {
          name: "菌类",
        },
      ],
    };
  },
  methods: {
    getdata() {},
  },
};
</script>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
  // border: 1px solid #000000;
}
div {
  display: block;
}
ul {
  list-style: none;
  padding-left: 20px;
}
ul > li > a {
  text-decoration: none;
  color: black;
}
ul > li > a:hover {
  color: orangered;
}
#caipu {
  width: 960px;
  height: 3565.5px;
  margin: 0 auto;
  font: 14px/1.3 tahoma, arial, "microsoft yahei", \5b8b\4f53;
  font-style: normal;
  font-variant-ligatures: normal;
  font-variant-caps: normal;
  font-variant-numeric: normal;
  font-variant-east-asian: normal;
  font-weight: normal;
  font-stretch: normal;
  font-size: 14px;
  line-height: 1.3;
  font-family: tahoma, arial, "microsoft yahei", 宋体;
}
h1.bt {
  color: #817c74;
  font-size: 20px;
  margin-top: 20px;
  text-align: center;
}
title1 {
  float: left;
  width: 960px;
  height: 168px;
  border: 1px solid black;
}
.title {
  display: block;
  float: left;
  margin: 10px;
  background-color: #a79e95;
  cursor: pointer;

  a {
    padding: 10px 22px;
    display: block;
    color: #fff;
    text-decoration: none;
  }
}
.title:hover {
  // border-top: 5px solid red;
  background-color: orange;
}
.zhukuang {
  clear: left;
  width: 960px;
  height: 187.78px;
  margin-top: 20px;
  margin-bottom: 20px;
  border: 1px solid #f1f0ee;
}
.pig1 {
  clear: left;
  background-color: #f1f0ee;
  width: 955px;
  height: 40px;
  line-height: center;
  padding-left: 5px;
}
.zhu {
  position: relative;
  line-height: 40px;
  margin-left: 23px;
  // clear: left;
  background-color: #f1f0ee;
  width: 908px;
  height: 40px;
  // text-align: left;
  font-size: 18px;
  background-image: url(https://ali.xinshipu.cn/2014/css/img/icon/zhu.png);
  background-position: right top;
  background-repeat: no-repeat;
  background-size: 55px 55px;
}
.pig {
  float: left;
  width: 958px;
  height: 132.78px;
  li {
    float: left;
    margin-left: 10px;
    width: 80px;
    margin-top: 15px;
    font: 14px/1.3 tahoma, arial, "microsoft yahei", \5b8b\4f53;
  }
}
.nyrou {
  // border: 1px solid black;
  width: 960px;
  height: 548.5px;

  .nyrou1 {
    float: left;
    width: 472px;
    height: 548.5px;
    margin-bottom: 15px;
    .bull > li {
      float: left;
      margin-left: 10px;
      width: 80px;
      margin-top: 15px;
    }
  }
  .niurou1 {
    float: left;
    width: 470px;
    height: 123.39px;
    border: 1px solid #f1f0ee;
    .niurou-2 {
      width: 468px;
      height: 40px;
      background-color: #f1f0ee;
      .niurou {
        padding: 0 25px;
        line-height: 40px;
        width: 420px;
        height: 40px;
        background-color: #f1f0ee;
        font-size: 18px;
      }
    }
  }
}
.qita-one {
  float: left;
  position: relative;
  top: 20px;
  background-color: #fff;
  border: 1px solid #eae6e3;
  width: 470px;
  height: 132px;
  .qita-2 > li {
    float: left;
    margin-left: 10px;
    width: 80px;
    margin-top: 15px;
  }
  .qita {
    width: 470px;
    height: 40px;
    background-color: #f1f0ee;
    position: relative;
    .qita-1 {
      padding: 0 25px;
      width: 418px;
      height: 40px;
      line-height: 40px;
      background-color: #f1f0ee;
      font-size: 18px;
    }
  }
}
.jirou-one {
  float: left;
  position: relative;
  top: 40px;
  background-color: #fff;
  border: 1px solid #eae6e3;
  width: 470px;
  height: 244.5px;
  .jirou-1 {
    width: 470px;
    height: 40px;
    background-color: #f1f0ee;
    .jirou-2 {
      width: 418px;
      height: 40px;
      line-height: 40px;
      background-color: #f1f0ee;
      padding: 0 25px;
      font-size: 18px;
    }
  }
  .jirou-3 > li {
    float: left;
    margin-left: 10px;
    width: 80px;
    height: 22.5px;
    margin-top: 15px;
  }
}
.nyrou2 {
  float: right;
  position: relative;
  width: 470px;
  height: 476.37px;

  .yangrou-1 {
    width: 468px;
    height: 90.2px;
    background-color: #fff;
    border: 1px solid #eae6e3;
    .yangrou-2 {
      width: 468px;
      height: 40px;
      background-color: #f1f0ee;
      .yangrou-3 {
        width: 418px;
        height: 40px;
        line-height: 40px;
        background-color: #f1f0ee;
        padding: 0 25px;
        font-size: 18px;
      }
    }
    .yangrou-4 > li {
      float: left;
      margin-left: 10px;
      width: 80px;
      height: 22.5px;
      margin-top: 15px;
    }
  }

  .nai {
    width: 468px;
    height: 156.59px;
    background-color: #fff;
    border: 1px solid #eae6e3;
    position: relative;
    top: 20px;
    padding-bottom: 8.2px;
    .nai-1 {
      width: 468px;
      height: 40px;
      background-color: #f1f0ee;
      .nai-2 {
        width: 418px;
        height: 40px;
        background-color: #f1f0ee;
        line-height: 40px;
        padding: 0 25px;
        font-size: 18px;
      }
    }
    .nai-3 > li {
      float: left;
      margin-left: 5px;
      width: 80px;
      height: 18.2px;
      margin-top: 15px;
    }
  }

  .yarou {
    width: 468px;
    height: 185.59px;
    background-color: #fff;
    border: 1px solid #eae6e3;
    position: relative;
    top: 40px;
    padding-bottom: 8.2px;
    .yarou-1 {
      width: 468px;
      height: 40px;
      background-color: #f1f0ee;
      .yarou-2 {
        width: 418px;
        height: 40px;
        background-color: #f1f0ee;
        line-height: 40px;
        padding: 0 25px;
        font-size: 18px;
      }
    }
    .yarou-3 > li {
      float: left;
      margin-left: 5px;
      width: 80px;
      height: 18.2px;
      margin-top: 15px;
    }
  }
}
.yurou {
  width: 958px;
  height: 254.172px;
  background-color: #fff;
  border: 1px solid #eae6e3;
  position: relative;
  margin-top: 20px;
  .yurou-1 {
    width: 958px;
    height: 40px;
    background-color: #f1f0ee;
    .yurou-2 {
      width: 905px;
      height: 40px;
      background-color: #f1f0ee;
      line-height: 40px;
      padding: 0 25px;
      font-size: 18px;
    }
  }
  .yurou-3 > li {
    float: left;
    margin-left: 10px;
    width: 80px;
    height: 18.2px;
    margin-top: 15px;
  }
}
.col2 {
  width: 960px;
  height: 1581.25px;
  margin-top: 20px;
  // border: 1px solid black;
  .col2-1 {
    float: left;
    width: 470px;
    height: 1581.25px;
    display: inline;
    .dan {
      width: 468px;
      height: 121.391px;
      background-color: #fff;
      border: 1px solid #eae6e3;
      .dan-1 {
        width: 468px;
        height: 40px;
        background-color: #f1f0ee;
        .dan-2 {
          width: 418px;
          height: 40px;
          background-color: #f1f0ee;
          line-height: 40px;
          padding: 0 25px;
          font-size: 18px;
        }
        .dan-3 {
          width: 468px;
          height: 66.39px;
        }
      }
      .dan-3 > li {
        float: left;
        margin: 15px 0px 0px 7px;
        width: 80px;
        height: 18.195px;
      }
    }
    .xie {
      width: 468px;
      height: 121.391px;
      background-color: #fff;
      border: 1px solid #eae6e3;
      margin-top: 20px;
      .xie-1 {
        width: 468px;
        height: 40px;
        background-color: #f1f0ee;
        .xie-2 {
          width: 418px;
          height: 40px;
          background-color: #f1f0ee;
          line-height: 40px;
          padding: 0 25px;
          font-size: 18px;
        }
        .xie-3 {
          width: 468px;
          height: 66.39px;
        }
      }
      .xie-3 > li {
        float: left;
        margin: 15px 0px 0px 7px;
        width: 80px;
        height: 18.195px;
      }
    }
    .qita- {
      width: 468px;
      height: 220.977px;
      background-color: #fff;
      border: 1px solid #eae6e3;
      position: relative;
      margin-top: 20px;
      .qita--1 {
        width: 468px;
        height: 40px;
        background-color: #f1f0ee;
        .qita--2 {
          width: 418px;
          height: 40px;
          background-color: #f1f0ee;
          line-height: 40px;
          padding: 0 25px;
          font-size: 18px;
        }
      }
      .qita--3 > li {
        float: left;
        margin: 15px 0px 0px 7px;
        width: 80px;
        height: 18.195px;
      }
    }
    .bu {
      width: 468px;
      height: 121.391px;
      background-color: #fff;
      border: 1px solid #eae6e3;
      position: relative;
      margin-top: 20px;
      .bu-1 {
        width: 468px;
        height: 40px;
        background-color: #f1f0ee;
        .bu-2 {
          width: 418px;
          height: 40px;
          background-color: #f1f0ee;
          line-height: 40px;
          padding: 0 25px;
          font-size: 18px;
        }
      }
      .bu-3 > li > a {
        float: left;
        margin: 15px 0px 0px 7px;
        width: 80px;
        height: 18.195px;
      }
    }
    .jin {
      width: 468px;
      height: 386.953px;
      background-color: #fff;
      border: 1px solid #eae6e3;
      position: relative;
      margin-top: 20px;
      .jin-1 {
        width: 468px;
        height: 40px;
        background-color: #f1f0ee;
        .jin-2 {
          width: 418px;
          height: 40px;
          background-color: #f1f0ee;
          line-height: 40px;
          padding: 0 25px;
          font-size: 18px;
        }
      }
      .jin-3 > li > a {
        float: left;
        margin: 15px 0px 0px 7px;
        width: 80px;
        height: 18.195px;
      }
    }
    .gan {
      width: 468px;
      height: 287.367px;
      background-color: #fff;
      border: 1px solid #eae6e3;
      position: relative;
      margin-top: 20px;
      .gan-1 {
        width: 468px;
        height: 40px;
        background-color: #f1f0ee;
        .gan-2 {
          width: 418px;
          height: 40px;
          background-color: #f1f0ee;
          line-height: 40px;
          padding: 0 25px;
          font-size: 18px;
        }
      }
      .gan-3 > li > a {
        float: left;
        margin: 15px 0px 0px 7px;
        width: 80px;
        height: 18.195px;
      }
    }
    .dou {
      width: 468px;
      height: 187.781px;
      background-color: #fff;
      border: 1px solid #eae6e3;
      position: relative;
      margin-top: 20px;
      .dou-1 {
        width: 468px;
        height: 40px;
        background-color: #f1f0ee;
        .dou-2 {
          width: 418px;
          height: 40px;
          background-color: #f1f0ee;
          line-height: 40px;
          padding: 0 25px;
          font-size: 18px;
        }
      }
      .dou-3 > li > a {
        float: left;
        margin: 15px 0px 0px 7px;
        width: 80px;
        height: 18.195px;
      }
    }
  }

  .col2-2 {
    float: right;
    width: 470px;
    height: 1581.25px;
    .qtql {
      width: 468px;
      height: 88.195px;
      background-color: #fff;
      border: 1px solid #eae6e3;
      .qtql-1 {
        width: 468px;
        height: 40px;
        background-color: #f1f0ee;
        .qtql-2 {
          width: 418px;
          height: 40px;
          background-color: #f1f0ee;
          line-height: 40px;
          padding: 0 25px;
          font-size: 18px;
        }
      }
      .qtql-3 > li > a {
        float: left;
        margin: 15px 0px 0px 7px;
        width: 80px;
        height: 18.195px;
      }
    }
    .xia {
      width: 468px;
      height: 187.781px;
      background-color: #fff;
      border: 1px solid #eae6e3;
      margin-top: 20px;
      .xia-1 {
        width: 468px;
        height: 40px;
        background-color: #f1f0ee;
        .xia-2 {
          width: 418px;
          height: 40px;
          background-color: #f1f0ee;
          line-height: 40px;
          padding: 0 25px;
          font-size: 18px;
        }
      }
      .xia-3 > li > a {
        float: left;
        margin: 15px 0px 0px 7px;
        width: 80px;
        height: 18.195px;
      }
    }
    .bei {
      width: 468px;
      height: 187.781px;
      background-color: #fff;
      border: 1px solid #eae6e3;
      margin-top: 20px;
      .bei-1 {
        width: 468px;
        height: 40px;
        background-color: #f1f0ee;
        .bei-2 {
          width: 418px;
          height: 40px;
          background-color: #f1f0ee;
          line-height: 40px;
          padding: 0 25px;
          font-size: 18px;
        }
      }
      .bei-3 > li > a {
        float: left;
        margin: 15px 0px 0px 7px;
        width: 80px;
        height: 18.195px;
      }
    }
    .gen {
      width: 468px;
      height: 287.367px;
      background-color: #fff;
      border: 1px solid #eae6e3;
      margin-top: 20px;
      .gen-1 {
        width: 468px;
        height: 40px;
        background-color: #f1f0ee;
        .gen-2 {
          width: 418px;
          height: 40px;
          background-color: #f1f0ee;
          line-height: 40px;
          padding: 0 25px;
          font-size: 18px;
        }
      }
      .gen-3 > li > a {
        float: left;
        margin: 15px 0px 0px 7px;
        width: 80px;
        height: 18.195px;
      }
    }
    .ggsc {
      width: 468px;
      height: 287.367px;
      background-color: #fff;
      border: 1px solid #eae6e3;
      margin-top: 20px;
      .ggsc-1 {
        width: 468px;
        height: 40px;
        background-color: #f1f0ee;
        .ggsc-2 {
          width: 418px;
          height: 40px;
          background-color: #f1f0ee;
          line-height: 40px;
          padding: 0 25px;
          font-size: 18px;
        }
      }
      .ggsc-3 > li > a {
        float: left;
        margin: 15px 0px 0px 7px;
        width: 80px;
        height: 18.195px;
      }
    }
    .jun {
      width: 468px;
      height: 254.172px;
      background-color: #fff;
      border: 1px solid #eae6e3;
      margin-top: 20px;
      .jun-1 {
        width: 468px;
        height: 40px;
        background-color: #f1f0ee;
        .jun-2 {
          width: 418px;
          height: 40px;
          background-color: #f1f0ee;
          line-height: 40px;
          padding: 0 25px;
          font-size: 18px;
        }
      }
      .jun-3 > li > a {
        float: left;
        margin: 15px 0px 0px 7px;
        width: 80px;
        height: 18.195px;
      }
    }
    .yan {
      width: 468px;
      height: 154.586px;
      background-color: #fff;
      border: 1px solid #eae6e3;
      margin-top: 20px;
      .yan-1 {
        width: 468px;
        height: 40px;
        background-color: #f1f0ee;
        .yan-2 {
          width: 418px;
          height: 40px;
          background-color: #f1f0ee;
          line-height: 40px;
          padding: 0 25px;
          font-size: 18px;
        }
      }
      .yan-3 > li > a {
        float: left;
        margin: 15px 0px 0px 7px;
        width: 80px;
        height: 18.195px;
      }
    }
  }
}
.mmf {
  width: 960px;
  height: 256.172px;
  margin-top: 20px;
  .mmf-1 {
    width: 960px;
    height: 256.172px;
    margin: 0 auto;
    min-width: 960px;
    .mi {
      width: 958px;
      height: 256.172px;
      background-color: #fff;
      border: 1px solid #eae6e3;
      .mi-1 {
        width: 958px;
        height: 40px;
        background-color: #f1f0ee;
        .mi-2 {
          width: 908px;
          height: 40px;
          background-color: #f1f0ee;
          line-height: 40px;
          padding: 0 25px;
          font-size: 18px;
        }
        .mi-3 {
          width: 958px;
          height: 199.172px;
        }
      }
      .mi-3 > li > a {
        float: left;
        margin-left: 10px;
        margin-top: 15px;
        width: 80px;
        height: 18.195px;
      }
    }
  }
}
.co2 {
  width: 960px;
  height: 189.781px;
  margin-top: 20px;
  .co2-1 {
    width: 470px;
    height: 187.781px;
    float: left;
    .caixi {
      width: 468px;
      height: 187.781px;
      background-color: #fff;
      border: 1px solid #eae6e3;
      .caixi-1 {
        width: 468px;
        height: 40px;
        background-color: #f1f0ee;
        .caixi-2 {
          width: 418px;
          height: 40px;
          background-color: #f1f0ee;
          line-height: 40px;
          padding: 0 25px;
          font-size: 18px;
        }
      }
      .caixi-3 > li > a {
        float: left;
        margin-left: 7px;
        margin-top: 15px;
        width: 80px;
        height: 18.195px;
      }
    }
  }
  .co2-2 {
    width: 470px;
    float: right;
    .kouwei {
      width: 468px;
      height: 187.781px;
      background-color: #fff;
      border: 1px solid #eae6e3;
      .kouwei-1 {
        width: 468px;
        height: 40px;
        background-color: #f1f0ee;
        .kouwei-2 {
          width: 418px;
          height: 40px;
          background-color: #f1f0ee;
          line-height: 40px;
          padding: 0 25px;
          font-size: 18px;
        }
      }
      .kouwei-3 > li > a {
        float: left;
        margin-left: 7px;
        margin-top: 15px;
        width: 80px;
        height: 18.195px;
      }
    }
  }
}
.sg {
  width: 960px;
  height: 189.781px;
  margin-top: 20px;
  .sg-1 {
    width: 960px;
    height: 189.781px;
    margin: 0 auto;
    min-width: 960px;
    .shuiguo {
      width: 958px;
      height: 187.781px;
      background-color: #fff;
      border: 1px solid #eae6e3;
      .shuiguo-1 {
        width: 958px;
        height: 40px;
        background-color: #f1f0ee;
        .shuiguo-2 {
          width: 908px;
          height: 40px;
          background-color: #f1f0ee;
          line-height: 40px;
          padding: 0 25px;
          font-size: 18px;
        }
      }
      .shuiguo-3 > li > a {
        float: left;
        margin-left: 10px;
        margin-top: 15px;
        width: 80px;
        height: 18.195px;
      }
    }
  }
}

.w {
  width: 100%;
}
.tc {
  text-align: center;
}
.footer {
  margin-top: 20px;
  height: 36px;
  line-height: 36px;
  background-color: #bbb8b5;
  color: #fff;
}
.fr {
  float: right;
  display: inline;
}
</style>


